import React from 'react';
import {
  Tabs,
  WhiteSpace
} from 'antd-mobile';
import { more_info } from "./GoodsMoreInfo.less";
import Img from '../../components/Img/Img';

// const TabPane = Tabs.TabPane;

/**
 * 商品更多信息
 * @param {*} param0
 */
export default function({ goodsDetailInfo = {} }) {
  const { afterSale = '', property = '', mobileBody = [] } = goodsDetailInfo;
  let goodsBody = [];
  if (mobileBody instanceof Array) {
    goodsBody = mobileBody;
  } else {
    const mobileBody1 = mobileBody.replace(/&quot;/g, '"');
    if (mobileBody1 && mobileBody1 != '') {
      goodsBody = JSON.parse(mobileBody1);
    }
  }

  return (
    <div id="goodsDetailInfoId" className={more_info}>
      <Tabs
        tabs={[
          { title: <div className="right_line">商品介绍</div> },
          { title: <div className="right_line">规格参数</div> },
          { title: <div className="right_line">包装售后</div> },
        ]}
        initalPage="t2"
      >
        <div style={{ height: '100%', overflow: 'hidden', backgroundColor: '#fff' }}>
            {
              goodsBody.map((item, index) => {
                if (item.type == 'image') {
                  return <Img key={index} src={item.value} style={{ width: '100%' }} />;
                }
              })
            }
        </div>
        <div style={{ height: '100%', overflow: 'hidden', backgroundColor: '#fff', minHeight: "2rem" }}><div dangerouslySetInnerHTML={{ __html: property }} /></div>
        <div style={{ height: '100%', overflow: 'hidden', backgroundColor: '#fff', minHeight: "2rem" }}>{afterSale}</div>
      </Tabs>
    </div>
    );
}
